
<style scoped>
.bigBox{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.banner {
    position: sticky;
    top: 0px;
    width: 100%;
}

body {
    background-color: pink;
}

.container {
    position: relative;
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.error {
    top: -70px;
    width: 360px;
    position: absolute;
}

.login {
    width: 670px;
    height: 450px;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    z-index: 1;
    /* border-radius: 10px; */
    box-shadow: 0px 0px 10px 0.2px #aaa;
}

.header {
    height: 23%;
    /* background-color: pink; */
    width: 100%;
    margin-bottom: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header img {
    height: 50%;
}

.write {
    width: 100%;
}

.sendAuth {
    color: rgb(117, 117, 117);
    position: absolute;
    top: 37%;
    font-size: 1.09em;
    right: 19%;
    color: #aaa;
    cursor: pointer;
}

input[type="text"],
input[type="password"] {
    width: 52%;
    padding: 1.5%;
    padding-left: 3%;
    height: 1.8%;
    box-sizing: content-box;
    background-color: rgba(241, 242, 246);
    border: 0px;
    border-radius: 10px;
    font-size: 1em;
    font-family: Source Han Sans CN;
    outline: none;
    margin-bottom: 3.7%;
    padding-right: 18%;
}

.countdown {
    display: none;
}

.loginForm {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
}

.canSee {
    position: absolute;
    top: 69%;
    left: 75%;
}

button {
    width: 69%;
    padding: 2.1%;
    box-sizing: content-box;
    border-radius: 16px;
    background-color: rgba(132, 147, 166);
    font-size: 1.2em;
    height: 2.5%;
    font-family: Source Han Sans CN;
}

.warning{
    background-color: #fef0f0;
    color: #f56c6c;
}
.pic {
    background-image: url(/src/assets/images/index/login/login.png);
    background-size: 86%;
    width: 443px;
    height: 41%;
    position: absolute;
    left: 0.4%;
    bottom: 0%;
    z-index: 0;
    background-repeat: no-repeat;
}
</style>
<template>
    <banner class="banner" :nowPage="nowPage"></banner>

    <div class="bigBox">
        <div class="container">
        <el-alert title="密码重置成功" type="success" show-icon :closable="false" v-show="controlEle.success" class="error" />
        <el-alert title="邮箱号/手机号不存在" type="error" show-icon :closable="false" v-show="controlEle.sendError" class="error" />
        <el-alert title="请输入正确格式的邮箱和手机号码" type="error" show-icon :closable="false" v-show="controlEle.errorFor" class="error" />

        <el-alert title="密码长度需6-20位并由数字或大小写字母组成" type="warning" show-icon :closable="false" v-show="controlEle.reminder"
            class="error"/>
            <el-alert title="密码重置失败" type="error" show-icon :closable="false" v-show="controlEle.submitError" class="error" />
            <el-alert title="已发送验证码" type="success" show-icon :closable="false" v-show="controlEle.sendSuccess" class="error" />
            <div class="login">
            <div class="header">
                <img src="/src/assets/images/index/logo.svg" alt="无法显示">
            </div>
            <div class="write">
                <form class="loginForm">
                    <input type="text" name="email" placeholder="请输入邮箱号/手机号" v-model="formData.email">
                    <input type="text" name="captcha" placeholder="邮箱验证码" v-model="formData.captcha">
                    <div class="sendAuth" @click="sendAuth">
                        <span ref="send">发送验证码</span>
                        <div class="countdown" ref="count">
                            {{ controlEle.cnt }}
                        </div>
                    </div>
                    <input type="password" name="newPassword" placeholder="请输入新的密码" v-model="formData.newPassword"
                        @keyup.enter.native="submit" @keyup="showReminder" @focus="showReminder"
                        @blur="controlEle.reminder = false" ref="psd">
                    <div class="canSee">
                        <el-switch v-model="canSee" class="ml-2"
                            style="--el-switch-on-color: #dbdde3; --el-switch-off-color: #afb8c5" @click="changeSee" />
                    </div>
                </form>
            </div>
            <el-button type="info" @click="submit">确 认</el-button>
        </div>
    </div>
    </div>
    <div class="pic"></div>
</template>
<script setup>
import { reactive, ref, onMounted, onActivated, onUpdated, VueElement, render } from 'vue'
import banner from '/src/components/Banner.vue'
import axios from 'axios'

import { onBeforeRouteLeave } from 'vue-router';

const labelPosition = ref('top')

// 控制页面的一些元素的行为
const controlEle = reactive({
    sendError: false,
    cnt: 60,
    success: false,
    reminder: false,
    submitError:false,
    sendSuccess: false,
    errorFor: false
})
const send = ref(null);
const count = ref(null);
const canSee = ref(false);
const psd = ref();
const nowPage = ref(1)

//要发送的数据
const formData = reactive({
    email: '',
    captcha: '',
    newPassword: '',
})

// 登陆失败提醒
const showHint = function () {

        controlEle.errorFor = true
        setTimeout(()=>{
            controlEle.errorFor = false
    }, 5000)
}


// 邮箱/手机号错误提醒
const showSendError = function () {
    controlEle.sendError = true;
    console.log(controlEle.sendError);
    setTimeout(() => {
        controlEle.sendError = false;
    }, 5000)
}

//验证码发送成功提醒
const showSendSuccess = ()=>{
    controlEle.sendSuccess = true;
    console.log(controlEle.sendSuccess);
    setTimeout(() => {
        controlEle.sendSuccess = false;
    }, 5000)
}
//密码更改失败
const showSubmitError = function(){
    controlEle.submitError = true;
    console.log(controlEle.submitError);
    setTimeout(() => {
        controlEle.submitError = false;
    }, 5000)
}

//更改密码成功
const showSuccess = () => {
    controlEle.success = true;
    console.log(controlEle.success);
    setTimeout(() => {
        controlEle.success = false
    }, 5000)
}

//发送验证码倒计时
const timeSub = ()=>{
    setInterval(() => {
    controlEle.cnt--;
    if (controlEle.cnt == -1) {
        count.value.style = 'display: none';
        send.value.style = 'display: block';
        clearInterval(timeSub);
    }
}, 1000)
}

//触发发送验证码倒计时
const countdown = function () {
    count.value.style = 'display:block'
    send.value.style = "display: none"
    controlEle.cnt = 60;
    timeSub();
}


//发送验证码
const sendAuth = function () {
    const data = {
        mail: formData.email,
        type: 2
    }
    const regTel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
    const regEma = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/

    if(regTel.test(formData.email) || regEma.test(formData.email)){      //里面写正则表达式
        
    }else{
        showHint()
        return false 
    }
    console.log(data);
    console.log(1);
    console.log(count.value);
    axios({
        headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
        method: 'post',
        url: 'http://api.linwine.space/api/sjk/login/verify/mail',
        data: JSON.stringify(data),
        responseType: 'json'
    }).then((data) => {
        console.log(data);
        console.log(data.data.code);
        if (data.data.code == 200) {
            countdown();
            showSendSuccess();
        }
        else
        {
            console.log(data.data.code);
            showSendError();
        }
    }).catch(() => {
        console.log('error');
    })
}

//输入密码时的提示信息
const showReminder = function () {
    controlEle.reminder = true;
    console.log('jin');
    // const psdReg = /[0-9a-zA-Z]+${6,20}/g;
    console.log(formData.newPassword);
    console.log(/^[0-9a-zA-Z]{6,20}$/g.test(formData.newPassword));
    if (/^[0-9a-zA-Z]{6,20}$/g.test(formData.newPassword)) {
        controlEle.reminder = false;
        console.log('goodPsd');
    }
    else {
        controlEle.reminder = true;
        console.log('badPsd');
    }
}

//密码是否可见
const changeSee = function () {
    console.log(canSee);
    console.log(psd.value.type);
    if (canSee.value)
        psd.value.type = "text";
    else
        psd.value.type = "password";
}

//提交密码
const submit = function () {
    // showSuccess()
    // showSubmitError();
    const userData = {
        email: formData.email,
        captcha: formData.captcha,
        newPassword: formData.newPassword
    }
    console.log(userData);
    if(/^[0-9a-zA-Z]{6,20}$/g.test(formData.newPassword))
    {
        axios({
            headers: {
            'Content-Type': 'application/json; charset=utf-8'
        },
            method: 'post',
            url: 'http://api.linwine.space/api/sjk//login/reset',
            data: JSON.stringify(userData),
            responseType: 'json'
        }).then((data) => {
            console.log(data);
            console.log(data.data.code);
            if (data.data.code == 400) {
                console.log(data.data.code);
                showSubmitError();
            }
            else {
                showSuccess();
            }
        }).catch(() => {
            console.log('error');
        })
    }
    else
    {
        showSubmitError();
    }
}
onMounted(() => {
    document.querySelector('body').setAttribute('style', 'background:linear-gradient( 90deg, rgb(241, 242, 246) 50%, rgb(219, 221, 227) 50%);')
})
onBeforeRouteLeave(() => {
    document.querySelector('body').removeAttribute('style')
})
</script>